<script lang="ts" setup>

import { Search, Refresh } from '@element-plus/icons-vue'
import { ref } from 'vue'
import * as _ from "lodash"

const currentPage = ref(1)
const pageSize = ref(4)
const dynasty = ref('')
const name = ref('')
const totalpage = ref()
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const dialogVisible = ref(false)
const dialogname = ref()
const displaydel = ref(false)
const value = ref('')
const title = ref('')
const time = ref(new Date())


const handleSizeChange = (size) => {
    pageSize.value = size
    authorData()
}
const handleCurrentChange = (current) => {
    currentPage.value = current
    authorData()
}
import {
    Delete,
    Edit,
    WarningFilled
} from '@element-plus/icons-vue'

import { authorlistServer } from '@/api/author';
import { ElMessage, FormRules } from 'element-plus';
import { postlistServer } from '@/api/mpost.js';
import { sectionlistServer } from '@/api/section.js';
import { alistServer } from '@/api/active.js';

const authordata = ref()
const postdata = ref()
const sectiondata = ref()
const activedata = ref()


const authorData = async () => {
    let params = {
        countpage: currentPage.value,
        pagenumber: pageSize.value,
        dynasty: dynasty.value ? dynasty.value : null,
        name: name.value ? name.value : null
    }

    let result = await authorlistServer(params)

    authordata.value = result.data.items
    totalpage.value = result.data.total
}

authorData()
const postData = async () => {

    let result = await postlistServer()

    postdata.value = result.data
}


postData();

const sectionData = async () => {
    let params = {
        countpage: 1,
        pagenumber: 5,
    }

    let result = await sectionlistServer(params)

    sectiondata.value = result.data.items
}

sectionData();

const activeData = async () => {

    let result = await alistServer()

    activedata.value = result.data
}

activeData();


const search = () =>{
    authorData()
}


</script>

<template>
    <div class="home">
        <el-container>
            <el-header>
                <el-input v-model="title" style="max-width: 600px;"  class="input-with-select">
                    <template #prepend>
                        <el-select v-model="dynasty" placeholder="朝代" style="width: 115px">
                            <el-option label="宋朝" value="宋朝" />
                            <el-option label="唐朝" value="唐朝" />
                            <el-option label="三国" value="三国" />
                            <el-option label="战国" value="战国" />
                            <el-option label="西汉" value="西汉" />
                            <el-option label="东汉" value="东汉" />
                            <el-option label="清朝" value="清朝" />
                            <el-option label="春秋" value="春秋" />
                            <el-option label="现代" value="现代" />
                            <el-option label="无" value="" />
                        </el-select>
                    </template>
                    <template #append>
                        <el-button :icon="Search" @click="search()" />
                    </template>
                </el-input>
            </el-header>
            <el-main>
                <div class="list">
                    <el-container>
                        <el-aside width=100% >
                                <el-card style="max-width: 900px;margin-left: auto;" v-for="data in authordata">
                                    <template #header>
                                        <div class="card-header">
                                            <el-text tag="b" size="large">{{ data.name }}</el-text>
                                        </div>
                                    </template>
                                    <el-text tag="p" size="small">{{ data.bi }}</el-text>
                                    <template #footer>
                                        <el-text tag="i">{{ data.dynasty  }}</el-text>
                                    </template>
                                </el-card>
                        </el-aside>
                        
                    </el-container>
                </div>
            </el-main>
            <el-footer>
                <el-pagination class="el-p" v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[4, 8, 12, 16]" :small="small" :disabled="disabled" :background="background"
                    layout="jumper, prev, pager, next, sizes, total" :total="totalpage" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </el-footer>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.home {

    .list {
        .el-aside {
            background-color: #D1CFB9;

            .el-main {
                background-color: #D1CFB9;
            }
        }
    }

    .el-aside {
        background-color: #D1CFB9;

    }

    .el-header {
        background: url('@/assets/login_bg.jpg') no-repeat center / cover;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 200px;

        .el-dropdown__box {
            display: flex;
            align-items: center;

            .el-icon {
                color: #999;
                margin-left: 10px;
            }

            &:active,
            &:focus {
                outline: none;
            }
        }

        .el-input {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

    }

    .el-main {
        background-color: #D1CFB9;

        .el-aside {
            .el-check-tag{
                margin: 0 auto;
                margin-bottom: 20px;
                margin-left: 10px;
                
            }

            .el-card {
                margin: 0 auto;
                margin-bottom: 20px;
                margin-left: 270px;
                background-color: #F0EFE2;

                .el-text {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0 auto;
                }
            }
        }

        .el-main {
            .el-card {
                margin: 0 auto;
                margin-bottom: 20px;
                margin-right: 200px;
                background-color: #F0EFE2;

                .el-tabs {
                    background-color: #F0EFE2;

                    .el-row {
                        display: flex;
                        align-items: left;
                        margin: 0 auto;
                        margin-bottom: 7px;

                        .el-badge {
                            align-items: left;
                        }

                        .el-text {
                            display: flex;
                            align-items: left;
                            margin: 0 auto;
                        }
                    }
                }
            }

            .el-calendar {
                margin: 0 auto;
                margin-bottom: 40px;
                margin-right: 200px;

            }
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #D1CFB9;


    }

}
</style>